import React, { Component } from "react";
/**
 * 移动端点击会有300ms延迟
 * index.jsx中引入了fastclick之后，可以直接使用onClick；
 */
class MobileClickEvent extends Component {
    touchStart = (ev) => {
        console.log(ev, 'ev');
        let finger = ev.changedTouches[0];
        this.touch = {
            startX: finger.pageX,
            startY: finger.pageY,
            isMove: false,
        }
    };
    touchMove = (ev) => {
        let finger = ev.changedTouches[0],
            { startX, startY } = this.touch;
        let changeX = finger.pageX - startX;
        let changeY = finger.pageY - startY;
        if ( Math.abs(changeX) > 10 || Math.abs(changeY) > 10 ) {
            this.touch.isMove = true;
        }
    };
    touchEnd = (ev) => {
        let { isMove } = this.touch;
        if ( isMove ) return;
        console.log('点击了按钮');
    };
    render() {
        return (
            <>
                <button 
                    onTouchStart={this.touchStart} 
                    onTouchMove={this.touchMove} 
                    onTouchEnd={this.touchEnd}
                >提交</button>
            </>
        )
    }
};
export default MobileClickEvent;
